Pipeline de Validation avec experimental_useFormState de React : Construire des Chaînes de Validation de Formulaire Robustes

La validation de formulaire est une pierre angulaire dans la création d'applications web robustes et conviviales. Le hook experimental_useFormState de React offre une approche puissante et flexible pour gérer l'état des formulaires et implémenter des pipelines de validation complexes. Cet article de blog explique comment tirer parti de experimental_useFormState pour créer des systèmes de validation de formulaire maintenables, évolutifs et adaptables à l'international.

Comprendre experimental_useFormState

experimental_useFormState est un hook expérimental de React (au moment de la rédaction de cet article ; vérifiez toujours la documentation officielle de React pour connaître le statut le plus récent) conçu pour simplifier la gestion et la validation des formulaires. Il gère les mises à jour de l'état du formulaire et vous permet de définir des fonctions réductrices (reducers) pour gérer des transitions d'état plus complexes. Son principal avantage réside dans sa capacité à s'intégrer de manière transparente avec les opérations asynchrones et la validation côté serveur.

Concepts Fondamentaux

• Gestion de l'état : experimental_useFormState gère l'ensemble de l'état du formulaire, réduisant le code répétitif (boilerplate) lié à la mise à jour des champs de formulaire individuels.
• Fonctions Réductrices (Reducers) : Il utilise des fonctions réductrices pour gérer les mises à jour de l'état, permettant une logique complexe et assurant des transitions d'état prévisibles. C'est similaire à useReducer, mais adapté à l'état des formulaires.
• Opérations Asynchrones : Il s'intègre de manière transparente avec les opérations asynchrones, facilitant la gestion de la validation et de la soumission côté serveur.
• Pipeline de Validation : Vous pouvez créer une chaîne de fonctions de validation qui sont exécutées séquentiellement, offrant une approche structurée et organisée de la validation de formulaire.

Créer un Pipeline de Validation

Un pipeline de validation est une séquence de fonctions exécutées les unes après les autres pour valider les données d'un formulaire. Chaque fonction effectue une vérification de validation spécifique, et le pipeline renvoie un résultat agrégé indiquant si le formulaire est valide ainsi que les messages d'erreur associés. Cette approche favorise la modularité, la réutilisabilité et la maintenabilité.

Exemple : Un Formulaire d'Inscription Simple

Illustrons cela avec un formulaire d'inscription de base qui requiert un nom d'utilisateur, un e-mail et un mot de passe.

1. Définir l'État du Formulaire

D'abord, nous définissons l'état initial de notre formulaire :

            const initialState = {
  username: '',
  email: '',
  password: '',
  errors: {},
  isValid: false,
};

            

              
                Copy
              
            
          

2. Implémenter la Fonction Réductrice

Ensuite, nous créons une fonction réductrice pour gérer les mises à jour de l'état :

            function formReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
        ...state,
        [action.field]: action.value,
      };
    case 'VALIDATE_FORM':
      return {
        ...state,
        errors: action.errors,
        isValid: action.isValid,
      };
    default:
      return state;
  }
}

            

              
                Copy
              
            
          

3. Définir les Fonctions de Validation

Maintenant, nous définissons des fonctions de validation individuelles pour chaque champ :

            const validateUsername = (username) => {
  if (!username) {
    return 'Le nom d\'utilisateur est obligatoire.';
  } else if (username.length < 3) {
    return 'Le nom d\'utilisateur doit comporter au moins 3 caractères.';
  } else if (username.length > 20) {
    return 'Le nom d\'utilisateur ne peut pas dépasser 20 caractères.';
  }
  return null;
};

const validateEmail = (email) => {
  if (!email) {
    return 'L\'e-mail est obligatoire.';
  } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
    return 'L\'e-mail n\'est pas valide.';
  }
  return null;
};

const validatePassword = (password) => {
  if (!password) {
    return 'Le mot de passe est obligatoire.';
  } else if (password.length < 8) {
    return 'Le mot de passe doit comporter au moins 8 caractères.';
  }
  return null;
};

            

              
                Copy
              
            
          

4. Créer le Pipeline de Validation

Nous assemblons les fonctions de validation en un pipeline :

            const validationPipeline = (state) => {
  const errors = {};
  errors.username = validateUsername(state.username);
  errors.email = validateEmail(state.email);
  errors.password = validatePassword(state.password);

  const isValid = Object.values(errors).every((error) => error === null);

  return { errors, isValid };
};

            

              
                Copy
              
            
          

5. Intégration avec experimental_useFormState

            import React from 'react';
import { experimental_useFormState as useFormState } from 'react';

function RegistrationForm() {
  const [state, dispatch] = useFormState(formReducer, initialState);

  const handleChange = (e) => {
    dispatch({
      type: 'UPDATE_FIELD',
      field: e.target.name,
      value: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const { errors, isValid } = validationPipeline(state);

    dispatch({
      type: 'VALIDATE_FORM',
      errors,
      isValid,
    });

    if (isValid) {
      // Soumettre le formulaire
      console.log('Le formulaire est valide, soumission en cours...', state);
    } else {
      console.log('Le formulaire est invalide, veuillez corriger les erreurs.');
    }
  };

  return (
    

      

        Nom d'utilisateur :
        
        {state.errors.username && 
{state.errors.username}
}
      
      

        E-mail :
        
        {state.errors.email && 
{state.errors.email}
}
      
      

        Mot de passe :
        
        {state.errors.password && 
{state.errors.password}
}
      
      S'inscrire
    
  );
}

export default RegistrationForm;

            

              
                Copy
              
            
          

Techniques de Validation Avancées

Validation Conditionnelle

Parfois, vous devez valider un champ en fonction de la valeur d'un autre champ. Par exemple, vous pourriez n'exiger un numéro de téléphone que si l'utilisateur sélectionne un pays spécifique.

            const validatePhoneNumber = (phoneNumber, country) => {
  if (country === 'USA' && !phoneNumber) {
    return 'Le numéro de téléphone est requis pour les États-Unis.';
  }
  return null;
};

            

              
                Copy
              
            
          

Validation Asynchrone

La validation asynchrone est cruciale lorsque vous devez vérifier la validité d'un champ par rapport à une base de données ou une API côté serveur. Par exemple, vous pourriez vouloir vérifier si un nom d'utilisateur est déjà pris.

            const validateUsernameAvailability = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.isTaken) {
      return 'Ce nom d\'utilisateur est déjà pris.';
    }
    return null;
  } catch (error) {
    console.error('Erreur lors de la vérification de la disponibilité du nom d\'utilisateur :', error);
    return 'Erreur lors de la vérification de la disponibilité du nom d\'utilisateur.';
  }
};

            

              
                Copy
              
            
          

Vous devrez intégrer cette validation asynchrone dans votre réducteur et gérer la nature asynchrone de manière appropriée en utilisant des Promesses (Promises) ou async/await.

Règles de Validation Personnalisées

Vous pouvez créer des règles de validation personnalisées pour gérer une logique métier spécifique ou des exigences de formatage. Par exemple, vous pourriez avoir besoin de valider un code postal en fonction du pays sélectionné.

            const validatePostalCode = (postalCode, country) => {
  if (country === 'USA' && !/^[0-9]{5}(?:-[0-9]{4})?$/.test(postalCode)) {
    return 'Code postal invalide pour les États-Unis.';
  } else if (country === 'Canada' && !/^[A-Z]\d[A-Z] \d[A-Z]\d$/.test(postalCode)) {
    return 'Code postal invalide pour le Canada.';
  }
  return null;
};

            

              
                Copy
              
            
          

Considérations sur l'Internationalisation (i18n)

Lors de la création de formulaires pour un public mondial, l'internationalisation est essentielle. Prenez en compte les éléments suivants :

• Formats de date : Utilisez une bibliothèque comme date-fns ou moment.js pour gérer différents formats de date en fonction de la locale de l'utilisateur.
• Formats de nombre : Utilisez Intl.NumberFormat pour formater les nombres selon la locale de l'utilisateur.
• Formats de devise : Utilisez Intl.NumberFormat pour formater correctement les devises, y compris le symbole monétaire et le séparateur décimal appropriés.
• Formats d'adresse : Envisagez d'utiliser une bibliothèque comme libaddressinput pour gérer différents formats d'adresse en fonction du pays de l'utilisateur.
• Messages d'erreur traduits : Stockez les messages d'erreur dans un fichier de traduction et utilisez une bibliothèque comme i18next pour les afficher dans la langue de l'utilisateur.

Exemple : Messages d'Erreur Traduits

Voici comment vous pouvez utiliser i18next pour traduire les messages d'erreur :

            // en.json
{
  "username_required": "Username is required.",
  "email_required": "Email is required.",
  "invalid_email": "Email is not valid."
}

// fr.json
{
  "username_required": "Le nom d'utilisateur est obligatoire.",
  "email_required": "L'adresse e-mail est obligatoire.",
  "invalid_email": "L'adresse e-mail n'est pas valide."
}

// Composant
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  const validateEmail = (email) => {
    if (!email) {
      return t('email_required');
    } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
      return t('invalid_email');
    }
    return null;
  };
}

            

              
                Copy
              
            
          

Considérations sur l'Accessibilité

Garantir l'accessibilité des formulaires est crucial pour créer des applications web inclusives. Suivez ces directives :

• Utilisez du HTML sémantique : Utilisez des éléments HTML appropriés comme <label>, <input>, et <button>.
• Fournissez des libellés clairs : Associez les libellés aux champs de formulaire en utilisant l'attribut for sur l'élément <label> et l'attribut id sur l'élément <input>.
• Utilisez les attributs ARIA : Utilisez les attributs ARIA pour fournir des informations supplémentaires aux technologies d'assistance, telles que les lecteurs d'écran.
• Fournissez des messages d'erreur : Affichez des messages d'erreur clairs et concis, faciles à comprendre. Utilisez des attributs ARIA comme aria-describedby pour associer les messages d'erreur aux champs de formulaire.
• Assurez la navigation au clavier : Assurez-vous que les utilisateurs peuvent naviguer dans le formulaire à l'aide du clavier. Utilisez l'attribut tabindex pour contrôler l'ordre de la mise au point (focus).
• Utilisez un contraste suffisant : Assurez un contraste suffisant entre les couleurs du texte et de l'arrière-plan pour rendre le formulaire lisible pour les utilisateurs ayant une déficience visuelle.

Meilleures Pratiques

• Gardez les fonctions de validation modulaires : Créez de petites fonctions de validation réutilisables qui effectuent des vérifications spécifiques.
• Utilisez une stratégie de gestion des erreurs cohérente : Implémentez une stratégie de gestion des erreurs cohérente dans toute votre application.
• Fournissez des messages d'erreur conviviaux : Affichez des messages d'erreur clairs et concis qui aident les utilisateurs à comprendre ce qui n'a pas fonctionné et comment le corriger.
• Testez vos formulaires de manière approfondie : Testez vos formulaires avec différents types de données et différents navigateurs pour vous assurer qu'ils fonctionnent correctement.
• Utilisez une bibliothèque de formulaires : Envisagez d'utiliser une bibliothèque de formulaires comme Formik ou React Hook Form pour simplifier la gestion et la validation des formulaires. Ces bibliothèques offrent un large éventail de fonctionnalités, telles que la gestion de l'état du formulaire, la validation et la gestion de la soumission.
• Centralisez les définitions des messages d'erreur : Maintenez un référentiel central de tous les messages d'erreur de formulaire pour faciliter la cohérence et la maintenabilité. Cela simplifie également le processus d'internationalisation.

Conclusion

Le hook experimental_useFormState de React, combiné à un pipeline de validation bien défini, offre une approche puissante et flexible pour créer des formulaires robustes et maintenables. En suivant les meilleures pratiques décrites dans cet article de blog, vous pouvez créer des formulaires conviviaux, accessibles et adaptables à l'international. N'oubliez pas de toujours vous référer à la documentation officielle de React pour les dernières mises à jour sur les fonctionnalités expérimentales.

La création d'une validation de formulaire efficace est un processus d'apprentissage continu. Expérimentez avec différentes techniques et adaptez-les à vos besoins spécifiques. La clé est de prioriser l'expérience utilisateur et de créer des formulaires à la fois faciles à utiliser et fiables.